import React, { useEffect, useRef, useState } from 'react'

export default function ClostureUseState() {
    const [count, setCount] = useState(0)
    // 解决方案一：使用useRef把状态保存到useRef。current中，这样组件全局共享的一份ref对象，它在组件的整个生命周期只有一份
    const countRef = useRef()
    countRef.current = count
    const handleCountClick = () => {
        // setCount是异步等待，下一轮事件循环中也会更新,该方法也可以传入回调函数，可以接受状态更新前的值
        setCount(pre => {
            return pre + 1
        })
        // 使用setTimout的目的是为了改变代码的执行时机
        setTimeout(()=>{
            console.log(count,'修改后的值');
            console.log(countRef,'修改后的值');
        })
    }
    // 使用useEFfect可以监听指定的状态，在状态更新后会自动执行回调函数，回调函数中可以拿到更新后的状态值
    useEffect(()=>{
        console.log(count,'useEffect修改后的值');
        console.log(countRef,'useEffect修改后的值');
    },[count])
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleCountClick}>修改</button>
        </div>
    )
}
